<!DOCTYPE html>
<html>
<head>
<title>四种边距:上、下、左、右</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="1.css" type="text/css"></link>
</head>
<!-- 外边距的常用属性与内边距基本类似 -->
<body>
	<div class="container1">
		<div class="bd1">
			<div class="pd1">
				<div class="content1">
					<p id="pid1">hello, world!---ONE</p>
				</div>
			</div>
		</div>
	</div>

	<!-- 外边距合并:当改变了container1的margin属性值100->50后,
	左右的边距改变了,但是上下的边距依旧没有改变,它遵循的是多的
	那一个即container2的margin的属性值->100 -->
	<div class="container2">
		<div class="bd2">
			<div class="pd2">
				<div class="content2">
					<p id="pid2">hello, world!---TWO</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
